import React, { Component } from 'react'

function Resizeable (Com){
    return class  extends Component {
        state = {
            size:[window.innerWidth,window.innerHeight]
        }
    
        onResize = () => {
            this.setState({
                size:[window.innerWidth,window.innerHeight]
            })
        }
    
        componentDidMount(){
            window.addEventListener('resize',this.onResize)
            document.title = this.state.size.join("x");
        }
    
        componentDidUpdate(){
            document.title = this.state.size.join("x");
        }
    
    
        componentWillUnmount(){
            window.removeEventListener('resize',this.onResize)
        }
        render() {
            return (
                <div>
                    <Com size={this.state.size}/>
                </div>
            )
        }
    }
} 

class Foo extends Component{
    render(){
        let [width,height] = this.props.size;
        return <div>
            {width}x1{height}
        </div>
    }
}

export default Resizeable(Foo)
